<template>
  <div class="main-page">
    <div class="main-01">
      <div class="main-tab-01-01">
        <div class="main-tab-title">
          <span>教师年龄分布</span>
        </div>
        <div id="chart5" style="width:100%;" class="echartMap-line"></div>
      </div>
      <div class="main-tab-01-01">
        <div class="main-tab-title">
          <span>职称分布</span>
        </div>
        <div id="development_Line" style="width:100%;" class="home_top_Development"></div>
      </div>
    </div>
    <div class="main-02">
      <div class="main-02-top">
        <div class="main-tab-title">
          <span>获奖称号分布</span>
        </div>
        <div id="honor_Chart" style="width:100%;height: 450px;" class="year_Chart"></div>
      </div>
      <div class="main-02-bottom">
        <div class="main-02-bottom-l">
          <div class="main-tab-title">
            <span>教职员工分布</span>
          </div>
          <div id="year_Chart" style="width:100%;height: 300px;" class="honor_Chart"></div>
        </div>
        <div class="main-02-bottom-l">
          <div class="main-tab-title">
            <span>党群分布</span>
          </div>
          <div id="development_Line-02" style="width:100%;height: 300px;" class="home_top_Development"></div>
        </div>
      </div>
    </div>
    <div class="main-03">
      <div class="main-tab-01-01">
        <div class="main-tab-title">
          <span>学历分布</span>
        </div>
        <div id="education_Chart" style="width:100%;height: 250px;" class="home_top_Development"></div>
      </div>
      <div class="main-tab-01-01">
        <div class="main-tab-title">
          <span>性别分布</span>
        </div>
        <div class="main-tab-box-l">
          <img src="./assets/img/h-006.png" class="main-tab-box-l-img"/>
          <div class="main-tab-box-t">
            <div class="main-tab-box-t-01">
              <span>教师总数</span>
              <span class="color-t03">{{ man+woman }}</span>
            </div>
            <div class="main-tab-box-t-01">
              <span>男</span>
              <span class="color-t02">{{ man }}</span>
            </div>
            <div class="main-tab-box-t-01">
              <span>女</span>
              <span class="color-t02">{{ woman }}</span>
            </div>
          </div>
        </div>
        <div id="gender_Chart" style="width:100%;height: 400px;" class="gender_Chart"></div>
      </div>
    </div>
    <popupTeacher :visible.sync="showPopup" :dataOption ="dataOption"></popupTeacher>
  </div>
</template>

<script>

import {schoolOverviewIndex, teacherTeam} from "@/api/admin/school";
import item from "@/layout/components/Sidebar/Item.vue";
import popupTeacher from "@/fullscreen/components/popupTeacher";
let echarts = require('echarts')
export default {
  name: "home",
  components:{popupTeacher},
  data() {
    return {
      man:0,
      woman:0,
      video_url: null,
      showPopup: false,
      dataOption: ''
    }
  },
  created() {
    this.getSchoolFn();
  },
  mounted() {
  },
  methods: {
    // 年龄分布
    age_echarts(data) {
      this.$nextTick(function () {
        let Chart5 = echarts.init(document.getElementById('chart5'));
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          xAxis: {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#b5c5d4', // 颜色
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: ['#b5c5d4'],
                type: 'solid'
              }
            },
            data: data.map(item => item.year),
          },
          yAxis: {
            type: 'value',
            max: 50, // 调整最大值以适应数据
            axisLine: {
              lineStyle: {
                color: '#b5c5d4', // 颜色
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#315070',
                type: 'dashed'
              }
            },
          },
          grid: {
            left: '2%',
            right: '2%',
            bottom: '3%',
            top: '10%',
            containLabel: true
          },
          series: [
            {
              name: '人数',
              type: 'bar',
              barWidth: '60%',
              data: data.map(item => item.number),
              itemStyle: {
                color: function(params) {
                  var colorList = ['#c23531','green', '#61a0a8', '#d48265', '#91c7ae'];
                  return colorList[params.dataIndex];
                }
              },
              label: {
                show: true,  // 显示标签
                position: 'top',  // 标签位置
                formatter: function (params) {
                  let total = data.reduce((sum, item) => sum + item.number, 0);
                  let percent = ((params.value / total) * 100).toFixed(1);
                  return percent + '%';
                },
                color: '#b5c5d4',  // 标签颜色
                fontSize: 18  // 标签字体大小
              }
            }
          ]
        };
        Chart5.setOption(option);
      });
    },
    // 职称分布
    level_echarts(data) {
      this.$nextTick(function () {
        let Chart5 = echarts.init(document.getElementById('development_Line'));
        let option = {
          color: ['#f1fe22', '#2f4554', '#61a0a8', '#d48265', '#91c7ae'], // 预定义的颜色数组
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          xAxis: {
            type: 'value',
            name: '数量',
            max: 60,  // 设置 x 轴的最大值为 50
            axisLine: {
              lineStyle: {
                color: '#b5c5d4', // 颜色
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#b5c5d4'],
                type: 'solid'
              }
            },
          },
          yAxis: {
            type: 'category',
            data: data.map(item => item.name),
            axisLine: {
              lineStyle: {
                color: '#b5c5d4', // 颜色
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#315070',
                type: 'dashed'
              }
            },
          },
          grid: {
            left: '2%',
            right: '2%',
            bottom: 0,
            top: '20px',
            containLabel: true
          },
          series: [{
            name: '数量',
            type: 'bar',
            barWidth: '40', // 设置柱子的宽度为10
            itemStyle: {
              normal: {
                label: {
                  show: true,  // 开启显示
                  position: 'right',  // 在右侧显示
                  textStyle: {  // 数值样式
                    color: '#b5c5d4',
                    fontSize: 16,
                  },
                  formatter: function (params) {
                    let total = data.reduce((sum, item) => sum + item.number, 0);
                    let percent = ((params.value / total) * 100).toFixed(2);
                    return params.value + ' (' + percent + '%)';
                  }
                },
                color: function(params) {
                  var colorList = ['#f1fe22', '#2f4554', '#61a0a8', '#d48265', '#91c7ae'];
                  return colorList[params.dataIndex];
                }
              }
            },
            data: data.map(item => item.number)
          }]
        };
        Chart5.setOption(option);
      });
    },
    // 党群分布
    political_echarts(data) {
      this.$nextTick(function () {
        let PoliticalChart = echarts.init(document.getElementById('development_Line-02'));
        let total = data.reduce((sum, item) => sum + item.number, 0);
        let option = {
          color: ['#5470c6', '#91cc75', '#fac858'], // 蓝色渐变颜色数组
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          xAxis: {
            type: 'value',
            name: '占比',
            axisLine: {
              lineStyle: {
                color: '#b5c5d4', // 颜色
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#b5c5d4'],
                type: 'solid'
              }
            },
          },
          yAxis: {
            type: 'category',
            data: data.map(item => item.name),
            axisLine: {
              lineStyle: {
                color: '#b5c5d4', // 颜色
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#315070',
                type: 'dashed'
              }
            },
          },
          grid: {
            left: '2%',
            right: '2%',
            bottom: 0,
            top: '20px',
            containLabel: true
          },
          series: [{
            name: '人数',
            type: 'bar',
            barWidth: '30', // 加粗柱子宽度
            itemStyle: {
              normal: {
                label: {
                  show: true,  // 开启显示
                  position: 'right',  // 在右侧显示
                  textStyle: {  // 数值样式
                    color: '#b5c5d4',
                    fontSize: 16,
                  },
                  formatter: (params) => `${(params.value / total * 100).toFixed(2)}%`
                },
                color: new echarts.graphic.LinearGradient(
                  0, 0, 1, 0,
                  [
                    { offset: 0, color: '#5470c6' },
                    { offset: 1, color: '#91cc75' }
                  ]
                )
              }
            },
            data: data.map(item => item.number)
          }]
        };
        PoliticalChart.setOption(option);
      });
    },
    // 学历分布
    education_echarts(data) {
      this.$nextTick(function () {
        let EducationChart = echarts.init(document.getElementById('education_Chart'));

        let option = {
          legend: {
            orient: 'horizontal',
            top: 'top',
            formatter: function (name, legendData) {
              return name;
            },
            textStyle: {
              color: '#fff' // 图例字体颜色
            },
          },
          graphic: [
            {
              type: 'group',
              top: '10%',
              left: 'center',
            }
          ],
          series: [
            {
              name: '学历分布',
              type: 'pie',
              roseType: 'radius', // 设置为南丁格尔玫瑰图
              radius: ['40%', '70%'],
              center: ['50%', '60%'], // 调整图表位置
              startAngle: 90, // 从顶部开始
              clockwise: false, // 逆时针方向
              avoidLabelOverlap: false,
              label: {
                show: true,
                position: 'inside',
                color: '#fff', // 标签字体颜色
                formatter: function (params) {
                  let total = data.reduce((sum, item) => sum + item.number, 0);
                  let percent = ((params.value / total) * 100).toFixed(2) + '%';
                  return `${params.name}\n${params.value} (${percent})`;
                }
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '30',
                  fontWeight: 'bold',
                  color: '#fff', // 强调标签字体颜色
                  formatter: function (params) {
                    let total = data.reduce((sum, item) => sum + item.number, 0);
                    let percent = ((params.value / total) * 100).toFixed(2) + '%';
                    return `${params.name}\n${params.value} (${percent})`;
                  }
                }
              },
              labelLine: {
                show: false
              },
              data: data.map(item => ({
                value: item.number,
                name: item.name,
                itemStyle: {
                  emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }))
            }
          ]
        };

        // 设置图例数据
        option.legend.data = data.map(item => item.name);

        EducationChart.setOption(option);
      });
    },
    // 性别分布
    gender_echarts(data) {
      this.$nextTick(function () {
        let GenderChart = echarts.init(document.getElementById('gender_Chart'));
        let option = {
          legend: {
            orient: 'horizontal',
            top: '10%', // 将图例位置稍微向下移动
            left: 'center', // 将图例水平居中
            textStyle: {
              color: '#fff' // 图例字体颜色
            },
            data: data.map(item => item.name) // 确保图例数据正确设置
          },
          series: [
            {
              name: '性别分布',
              type: 'pie',
              radius: '50%', // 单个值，去除内圈
              center: ['50%', '60%'], // 调整图表位置，使其向下移动
              avoidLabelOverlap: false,
              label: {
                show: true,
                position: 'outside', // 将标签位置调整为外部
                formatter: function (params) {
                  let total = data.reduce((sum, item) => sum + item.number, 0);
                  let percent = ((params.value / total) * 100).toFixed(2) + '%';
                  return `${params.name.slice(0, 7)} (${percent})`; // 截取前7个字符并显示百分比
                },
                color: '#fff' // 标签字体颜色
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '30',
                  fontWeight: 'bold',
                  color: '#fff' // 强调标签字体颜色
                }
              },
              labelLine: {
                show: true,
                length: 15, // 调整标签线的长度
                length2: 15 // 调整标签线的第二段长度
              },
              data: data.map(item => ({
                value: item.number,
                name: item.name,
                itemStyle: {
                  color: item.name === '男' ? '#007bff' : '#8a2be2' // 男性为蓝色，女性为紫色
                }
              }))
            }
          ]
        };

        GenderChart.setOption(option);
      });
    },
    //获奖称号分布
    honor_echarts(data) {
      let that =this
      this.$nextTick(function () {
        let HonorChart = echarts.init(document.getElementById('honor_Chart'));

        // 计算总数
        let total = data.reduce((sum, item) => sum + item.number, 0);

        // 预定义颜色数组
        const colors = [
          '#FF6F69', '#6B5B95', '#88B04B', '#F7CAC9', '#92A8D1',
          '#955251', '#BDB2FF', '#D1F2EB', '#FAC8C7', '#FF968A',
          '#B5EAD7', '#FF6F69', '#6B5B95', '#88B04B', '#F7CAC9',
          '#92A8D1', '#955251', '#BDB2FF', '#D1F2EB', '#FAC8C7',
          '#FF968A', '#B5EAD7'
        ];

        let option = {
          series: [
            {
              name: '荣誉分布',
              type: 'pie',
              radius: ['50%', '70%'], // 圆环图的内外半径
              center: ['50%', '50%'], // 调整图表位置
              avoidLabelOverlap: false,
              label: {
                show: true,
                position: 'outside',
                formatter: function (params) {
                  let percent = ((params.value / total) * 100).toFixed(2);
                  return `${params.name} (${params.value}人, ${percent}%)`; // 显示名称、人数和百分比
                },
                color: '#fff' // 标签字体颜色
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '30',
                  fontWeight: 'bold',
                  color: '#fff' // 强调标签字体颜色
                }
              },
              labelLine: {
                show: true
              },
              data: data.map((item, index) => ({
                value: item.number,
                name: item.name,
                itemStyle: {
                  color: colors[index % colors.length] // 使用预定义的颜色数组
                }
              }))
            }
          ]
        };

        HonorChart.setOption(option);
        HonorChart.on('click', function(params) {
          console.log('click', params);
          that.dataOption = params.data.name
          that.showPopup = true
        });
      });
    },
    // 教职员工分布
    year_echarts(data) {
      this.$nextTick(function () {
        let YearChart = echarts.init(document.getElementById('year_Chart'));

        // 提取年份和类别
        let years = data.map(item => item.name);
        let categories = Object.keys(data[0].list).map(key => data[0].list[key].name);

        // 构建数据
        let seriesData = categories.map(category => {
          console.log(`Category: ${category}`); // 输出类别
          return {
            name: category,
            type: 'bar',
            stack: '总量',
            data: data.map(yearData => {
              const key = Object.keys(yearData.list).find(k => yearData.list[k].name === category);
              return (yearData.list[key] && yearData.list[key].number) || 0;
            })
          };
        });

        // 计算总和
        let totalData = data.map(yearData => {
          return Object.values(yearData.list).reduce((sum, item) => sum + item.number, 0);
        });

        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: function (params) {
              let total = totalData[params[0].dataIndex];
              let tooltipContent = params.map(param => {
                let percentage = ((param.value / total) * 100).toFixed(2) + '%';
                return `${param.seriesName}: ${param.value} (${percentage})`;
              }).join('<br>');
              return tooltipContent;
            }
          },
          legend: {
            data: categories,
            textStyle: {
              color: '#fff' // 图例字体颜色
            }
          },
          xAxis: {
            type: 'category',
            data: years,
            axisLabel: {
              color: '#fff' // x轴标签字体颜色
            }
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              color: '#fff' // y轴标签字体颜色
            }
          },
          series: seriesData
        };

        YearChart.setOption(option);
      });
    },
    getSchoolFn() {
      teacherTeam().then(res => {
        if (res.code == 0){
          this.man = res.sex['0'].number;
          this.woman = res.sex['1'].number;
          this.age_echarts(res.age)
          this.level_echarts(res.level)
          this.political_echarts(res.political_type)
          this.education_echarts(res.education)
          this.gender_echarts(res.sex)
          this.honor_echarts(res.honor)
          this.year_echarts(res.year)
        }
        console.log(res,'教师返回的')
      })
    }
  }
}
</script>

<style scoped>
.main-page {
  display: flex;
  padding: 10px;
}

.main-tab-title {
  background: url(./assets/img/h-008.png) no-repeat;
  background-size: 100% 50px;
  background-position: left bottom;
  height: 50px;
  font-style: italic;
  font-size: 26px;
  padding-left: 40px;
  line-height: 24px;
  font-weight: 500;
  margin-bottom: 20px;
}

.main-tab-title span {
  background: linear-gradient(to bottom, #fff, #fcfcb8);
  -webkit-background-clip: text; /* 将背景裁剪为文字区域 */
  -webkit-text-fill-color: transparent; /* 将文字颜色设置为透明 */
  /*color: #fcfcb8;*/
  /*text-shadow: 2px 2px 1px #000;*/
}

.main-01 {
  width: 20%;
  background: rgba(5, 25, 53, .6);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.main-02 {
  flex: 1;
  background: rgba(5, 25, 53, .6);
  margin: 0 20px;
  border-radius: 10px;
}

.main-03 {
  width: 20%;
  background: rgba(5, 25, 53, .6);
  border-radius: 10px;
  padding: 10px;
}

.main-tab-box-t-01 span:nth-child(1) {
  font-size: 14px;
  color: #ddd;
  margin-bottom: 5px;
  display: block;
}

.main-tab-box-t-01 span:nth-child(2) {
  font-size: 20px;
}

.home_top_Development {
  height: 100%;
  width: 100%;
}

.main-tab-01-01 {
  flex: 1; /* 使每个子元素高度相等 */
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
}

.echartMap-line, .home_top_Development {
  flex: 1; /* 使图表区域高度占满剩余空间 */
  width: 100%;
}

.header-bo-l-video {
  width: 100%;
  height: 680px;
}

.main-02-bottom {
  display: flex;
  align-items: center;
  padding-top: 20px;
}

.main-02-bottom-l {
  flex: 1;
}

.main-02-bottom-l:first-child {
  margin-right: 20px;
}

.banner-box {
  overflow: hidden;
}

.banner-box-img {
  width: 50%;
  float: left;
  margin-bottom: 20px;
  padding-top: 20px;
}

.banner-box-img:nth-child(2n-1) {
  padding-right: 10px;
}

.banner-box-img:nth-child(2n) {
  padding-left: 10px;
}

.banner-box img {
  width: 100%;
  display: block;
}

.main-tab-box-l {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.main-tab-box-l:last-child {
  margin-bottom: 0;
}

.main-tab-box-l-img {
  margin-right: 20px;
}
.main-tab-box-t {
  display: flex;
  align-items: center;
  flex: 1;
}
.main-tab-box-t-01 {
  flex: 1;
}

.main-tab-box-t-01 span:nth-child(1) {
  font-size: 14px;
  color: #ddd;
  margin-bottom: 5px;
  display: block;
}

.main-tab-box-t-01 span:nth-child(2) {
  font-size: 20px;
}

.color-t02 {
  color: #32dcfb;
}

.color-t03 {
  color: #0fda83;
}
</style>
